<template>
	<view :width="width" class="flex-x rate__plan__container">
		<view
			v-show="currentWidth"
			:style="{
				width: currentWidth + 'rpx'
			}"
			class="over__rate__plan" />
		<view
			v-show="lessWidth"
			:style="{
				borderTopLeftRadius: (currentWidth ? '' : '6rpx') ,
				borderBottomLeftRadius: (currentWidth ? '' : '6rpx') ,
				width: lessWidth + 'rpx'
			}"
			class="rate__plan" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentWidth: 0 ,
				lessWidth: 0
			}
		} ,
		created() {
			let total = this.width
 			this.currentWidth = this.total - this.current < 0 ? total : (this.current / parseInt(this.total) * parseInt(total))
			this.lessWidth = total - this.currentWidth
		} ,
		props: {
			// 当前进度
			current: {
				type: Number ,
				default: '10'
			} ,
			// 总数量
			total: {
				type: Number ,
				default: 100
			} ,
			// 总长度
			width: {
				type: String ,
				default: '100'
			}
		}
	}
</script>

<style>
	.rate__plan__container {
		margin-right: 10rpx;
	}
	
	.over__rate__plan {
		position: relative;
		top: 0;
		left: 0;
		border-radius: 6rpx;
		border: 5rpx solid #FFFFFF;
	}
	
	.rate__plan {
		position: relative;
		top: 0;
		left: 0;
		border-top-right-radius: 6rpx;
		border-bottom-right-radius: 6rpx;
		border: 5rpx solid #A1071A;
	}
</style>
